<template>
  <div class="home" id="home">
    <fileTree class="left"/>
    <div class="main-content">

      <myHeader v-if="!previewStatus"/>

      <advancedFun v-if="advancedFunStatus === 2"/>

      <upload
        id="file2"
        :uploadId="file2"
        v-show="(nullContent||!hasFileToShow)&&!previewStatus"
        @dragenter.native="setDirectory('KWJJ')"
      >
        <nullContent
          :showText="!nullContent&&!hasFileToShow"
          class="null-content"
        />
      </upload>

      <div class="preview-wrap" v-show="previewStatus">
        <pdfPages></pdfPages>
      </div>

      <upload
        id="file3"
        :uploadId="file3"
        :disabledclick="true"
        :showNotAllowed="false"
        v-show="!nullContent&&hasFileToShow"
        @dragenter.native="setDirectory('KWJJ')"
      >
        <div class="right">
          <fileShow v-show="showFile"/>
          <ocrResult :class="{fullWidth:!showFile}"/>
        </div>
      </upload>

      <fileDownload />

    </div>

  </div>
</template>

<script>
import activeShowMinxin from "../mixin/activeShow.mixin";
import fileTree from "../components/function/fileTree";
import fileShow from "../components/function/fileShow";
import ocrResult from "../components/function/ocrResult";
import nullContent from "../components/public/nullContent";
import myHeader from "../components/public/header";
import advancedFun from "../components/function/advancedFun";
import upload from "../components/public/upload";
import fileDownload from "../components/function/fileDownload";
import pdfPages from "../components/function/pdfPages";

export default {
  mixins: [activeShowMinxin],
  components: {
    ocrResult,
    fileTree,
    fileShow,
    nullContent,
    myHeader,
    advancedFun,
    upload,
    fileDownload,
    pdfPages,
  },
  data () {
    return {
      file2: '#file2',
      file3: '#file3',
    }
  },
  methods: {
    setDirectory(id) {
      // if (id === this.currentDirectoryId) return
      // let dirId = '';
      // for (let i = 0; i < this.folderList.length; i++) {
      //   if (this.folderList[i].dirType === 0) {
      //     dirId = this.folderList[i].id;
      //     break;
      //   }
      // }
      // this.setDirectoryId(id);
      // if (id === '') {
      //   this.setDirId(dirId);
      // } else {
      //   this.setDirId(id);
      // }
      this.setDirId(id);
    },
  },
  computed: {
    nullContent() {
      return Boolean(!this.$store.state.file.fileList.length);
    },
    hasFileToShow() {
      let item = this.fileItem;
      return Boolean(item ? item.id : null) && !this.previewStatus;
    },
    showFile() {
      let docType = ["doc", "docx", "txt"];
      if (this.fileItem) {
        let item = docType.find(
          item =>
            item == this.fileItem.fileType ||
            item.toUpperCase() == this.fileItem.fileType
        );

        return item ? false : true;
      }
    },
    fileItem() {
      return this.$store.state.activeFile.item;
    },
    currentDirectoryId() {
      return this.$store.state.file.currentDirectoryId || ''
    },
    folderList() {
      return this.$store.state.file.folderList;
    },
    advancedFunStatus() {
      return this.$store.state.status.advancedFunStatus;
    },
    previewStatus() {
      return this.$store.state.file.previewStatus;
    },
  }
};
</script>

<style lang="less" scoped>
.main-content {
  padding: 16px;
  overflow: auto;
  width: calc(100% - 240px);
  height: 100%;
  min-width: 845px;
  float: left;
}

.home {
  width: 100%;
  height: calc(100% - 48px);
  overflow: auto;

  .null-content,
  .right {
    flex-grow: 1;
    height: 100%;
    z-index: 1;
  }

  .left {
    float: left;
    width: 240px;
    height: 100%;
    background: #f7f8fa;
    overflow: hidden;
  }

  .right {
    display: flex;

    & > div {
      width: 50%;

      &.fullWidth {
        width: 100%;
        overflow: auto;
      }
    }
  }
}

.preview-wrap{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
